<template>
  <div :class="className" :style="{ backgroundColor: datas.preview_color }">
    <div v-html="css"></div>
    <div class="special_subject">
      <template v-for="(special, index) in datas.list">
        <div class="list" :key="index" v-if="!special.hidden" >
          <div class="list_top">
            <div class="list_top_l">
              <img :src="special.logo" alt="" class="logo" />
              <div class="title">{{ special.name }}</div>
            </div>
            <div class="list_top_r" @click="toBrand(special.id)">进入会场</div>
          </div>
          <div class="list_bottom" v-if="special.has_many_goods && special.has_many_goods.length > 0">
            <div class="lis" v-for="item in special.has_many_goods" :key="item" @click="tolink(item, 'goods', { id: item.id })">
              <div class="lis_img">
                <img :src="item.thumb" alt="" />
              </div>
              <div class="price">{{$i18n.t("money")}}{{ item.price }}</div>
              <div class="price_td">{{$i18n.t("money")}}{{ item.market_price }}</div>
            </div>
          </div>
        </div>
      </template>
      <div class="moreTxt" v-if="(page < total_page) && datas.get_style == 0" @click="getMoreData" style="color:#999999;">点击加载更多</div>
    </div>
  </div>
</template>
<script>
const css = function() {
  if (this.datas.preview_color) {
    const { preview_color, price_color, market_price, btn_text_color, btn_color } = this.datas;
    return `
      .component-${this.id} .special_subject{
        background-color: ${preview_color};
        padding: 0.63rem 0.75rem 0.63rem 0.75rem;
        box-sizing: border-box;
        overflow: hidden;
      }
      .component-${this.id} .special_subject .list .list_bottom .price{
        color: ${price_color};
      }
      .component-${this.id} .special_subject .list .list_bottom .price_td{
        color: ${market_price};

      } 
      .component-${this.id} .special_subject .list .list_top .list_top_r{
        background: ${btn_color};
        color: ${btn_text_color};
      }
    `;
  }
};
export default {
  props: ["datas", "leftShow", "childStyle", "id", "page_id", "component_key", "index", "childComponent"],
  data() {
    return {
      page: 1,
      total_page: 0,
      isLoadMore: false
    };
  },
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    }
  },
  mounted() {
    this.setDataM();
  },
  methods: {
    tolink(item, key, params = {}) {
      this.$router.push(this.fun.getUrl(key, params));
    },
    async getMoreData() {
      // 只有获取全部的时候才需要加载更多
      if (!this.isLoadMore) return;
      this.isLoadMore = false;
      if (this.page >= this.total_page) return;
      this.page = this.page + 1;
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.decorate.brandList", { page: this.page }, "");
      this.isLoadMore = true;
      if (result) {
        this.datas.list = this.datas.list.concat(data.list.data);
      } else {
        this.$toast(msg);
        this.page = this.page - 1;
      }
    },
    toBrand(id) {
      this.$router.push(this.fun.getUrl("brand_home", { id: id }));
    },
    async setDataM() {
      if (this.datas.get_style == 0) {
        console.log('获取全部')
        // 装修获取全部
        let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.decorate.brandList", {}, "");
        if (result) {
          this.datas.list = data.list.data;
          this.total_page = data.list.last_page;
          this.page = 1;
          this.isLoadMore = true;
        } else {
          this.$toast(msg);
        }
      } else {
        // 装修手动获取
        let ids = this.datas.list.map(ele => ele.id);
        if(ids.length <= 0) return
        let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.decorate.brandList", { brand_ids: ids }, "");
        if (result) {
          this.isLoadMore = false;
          const idToGoodsMap = {};
          data.list.forEach(item => {
            idToGoodsMap[item.id] = item.has_many_goods;
          });
          // 更新 this.datas.list 中对应 id 的数据
          this.datas.list.forEach(item => {
            if (idToGoodsMap[item.id]) {
              this.$set(item, "has_many_goods", idToGoodsMap[item.id]);
            }else{
              console.log('没有数据',item)
              this.$set(item, "hidden", true);
            }
          });
        } else {
          this.$toast(msg);
        }
        // return this.datas.list;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.special_subject {
  .list {
    padding: 0.69rem 0.63rem;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0.63rem;
    margin-bottom: 0.63rem;
    .list_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .list_top_l {
        flex: 1;
        display: flex;
        align-items: center;
        overflow: hidden;

        .title {
          flex: 1;
          font-weight: bold;
          font-size: 1rem;
          color: #00001c;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: left;
        }
        .logo {
          flex-shrink: 0;
          width: 2.63rem;
          height: 2.63rem;
          background: #ffffff;
          border: 0.03rem solid #d6d6dc;
          margin: 0;
          margin-right: 0.63rem;
        }
      }
      .list_top_r {
        font-weight: bold;
        font-size: 0.81rem;
        padding: 0.59rem 0.69rem;
        box-sizing: border-box;
        border-radius: 1.88rem;
      }
    }
    .list_bottom {
      margin-top: 0.63rem;
      display: flex;
      .lis {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-right: 0.5rem;
        width: calc(100% / 3);
        .lis_img {
          width: 100%;
          height: 6rem;
          border-radius: 0.5rem;
          img {
            width: 100%;
            height: 100%;
            border-radius: 0.5rem;
          }
        }
        .price {
          margin: 0.44rem 0.13rem 0 0.13rem;
          box-sizing: border-box;
          font-weight: 500;
          font-size: 0.88rem;
        }
        .price_td {
          margin: 0.15rem 0.13rem 0 0.13rem;
          font-weight: 400;
          font-size: 0.75rem;
          text-decoration-line: line-through;
        }
      }
      .lis:last-child {
        margin-right: 0;
      }
    }
  }
  .list:last-child {
    margin-bottom: 0;
  }
}
</style>
